<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue 调用 push 给数组添加元素会自动更新吗？为什么？</title>
</head>
<body>
	<div>
		答案：会自动更新
	</div>
	<div>
		Vue2.x 响应式系统是基于 Object.defineProperty实现的，由于JavaScript的限制，Object.defineProperty 不能跟踪对象属性值为数组的数据的 push 方法，所以Vue2.x 就改写了数组原型的push方法
	</div>
	<div>
		Vue3.x 的响应式系统是基于 Proxy 实现的，解决了 Object.defineProperty的限制
	</div>
	<script type="text/javascript">
		["push"].forEach(function (method) {
			//   缓存数组原始的push方法
			var original = Array.prototype[method];
			var arrayMethods = Object.create(Array.prototype);
			var newPush = function () {
			var args = [],
			  len = arguments.length;
			while (len--) args[len] = arguments[len];

			var result = original.apply(this, args);
			// data中每个数组都有一个__ob__的私有属性指向创建的Observer实例
			var ob = this.__ob__;
			// 监听数组的push调用，触发响应式系统
			// 向所有依赖发送通知，告诉数组的值发生变化了
			ob.dep.notify();
			return result;
			};
			Object.defineProperty(arrayMethods, "push", {
				value: newPush,
				enumerable: !!enumerable,
				writable: true,
				configurable: true,
			});
		});
	</script>
</body>
</html>